<template>
    <div class="image-loader-container">
        <img class="placeholder" :src="placeholder" v-if="!everyThingDone" />
        <img class="origin" :src="src" @load="handleLoad"
            :style="{ opacity: originOpacity, transition: `${duration}ms` }" />
    </div>
</template>

<script>

export default {
    props: {
        src: {
            type: String,
            require: true
        },
        placeholder: {
            type: String,
            require: true
        },
        duration: {
            type: Number,
            default: 500
        }
    },
    data() {
        return {
            originLoaded: false,  //原图是否加载完成
            everyThingDone: false,  //一切都已经尘埃落定了
        }
    },
    computed: {
        originOpacity() {
            return this.originLoaded ? 1 : 0;
        }
    },
    methods: {
        handleLoad() {
            this.originLoaded = true;
            setTimeout(() => {
                this.everyThingDone = true;
                this.$emit("load");   //图片加载完成，通知父组件
            },this.duration); 
        }
    }
}
</script>

<style lang="less" scoped>
@import "~@/styles/mixin.less";

.image-loader-container {
    width: 100%;
    height: 100%;
    position: relative;

    img {
        .self-fill();
        object-fit: cover; //防止图片比例失调
    }


    .placeholder {
        filter: blur(2vw); //虚化图片
    }
}
</style>